<template>
  <div class="table">
    <div class="crumbs " >
      <el-breadcrumb>
        <el-breadcrumb-item>
          <i class="el-icon-tickets">运费计算</i>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="form">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="货代公司">
            <el-checkbox-group v-model=forwardIdList>
              <el-checkbox v-for="item in freightForwardList"
                           :key="item.forwardId"
                           :label="item.name"
                           :name="item.forwardId"
                           @change="handleCheckboxChange(item)"
              >
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="仓库名称">
            <el-input v-model="form.areaName" style="width: auto"></el-input>
          </el-form-item>
          <el-form-item label="重量">
            <el-input v-model="form.weight" style="width: auto"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="form.num" style="width: auto"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="addLoading" @click="onSubmit">查询价格</el-button>
          </el-form-item>
        </el-form>

      </div>

      <!--      运费计算弹出框-->
      <el-dialog title="运费计算" :visible.sync="calculateVisible" width="60%" @close="closeFreight" center>
        <el-table
          :data="calculateList"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading="addLoading"
          fit
        >
          <el-table-column
            label="货代名称"
            min-width="50px"
            prop="name">
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column
            label="渠道名称"
            min-width="50px"
            prop="channelName">
          </el-table-column>
          <el-table-column
            label="仓库名称"
            min-width="50px"
            prop="areaName">
          </el-table-column>
          <el-table-column
            label="重量"
            min-width="50px"
            prop="weight">
          </el-table-column>
          <el-table-column
            label="单价"
            min-width="50px"
            prop="price">
          </el-table-column>
          <el-table-column
            label="数量"
            min-width="50px"
            prop="number">
          </el-table-column>
          <el-table-column
            label="运费价格"
            min-width="50px"
            prop="freightPrice">
          </el-table-column>

        </el-table>
      </el-dialog>


    </div>

  </div>
</template>

<script>
import axios from "../../../util/axios_config";
import {getFreightForwardData, getChannelData} from "../../../util/common.js";
import form from "vue-resource/src/http/interceptor/form";

export default {
  data() {
    return {
      form: {
        areaName: '',
        weight: '',
        num: '',
        forwardAttr: []
      },
      addLoading: false,
      calculateVisible: false,
      freightForwardList: [],//货代数据
      forwardIdList: [],//复选框选择的值
      forwardDataList: [],//复选框数据队列
      calculateList: []//运费价格数据
    }
  },
  created() {
    //获取货代信息
    getFreightForwardData().then(data => {
      this.freightForwardList = data;
      this.addLoading = false;
    }).catch(error => {
      this.addLoading = true;
      this.$message.error(error.message);
    });
  },

  methods: {
    //关闭运费价格窗口
    closeFreight() {
    this.calculateVisible = false;
    this.calculateList = [];
    },
    //复选框选中
    handleCheckboxChange(item) {
      const index = this.forwardDataList.findIndex(selectedItem => selectedItem.forwardId === item.forwardId);
      if (index === -1) {
        // 如果未找到，添加到数组中
        this.forwardDataList.push({forwardId: item.forwardId, name: item.name});
      } else {
        // 如果找到，移除该项
        this.forwardDataList.splice(index, 1);
      }
    },
    onSubmit() {
      if (this.form.num === "" || this.form.weight === "" || this.form.areaName === "" || this.forwardDataList.length <= 0) {
        this.$message.error("请填写相应内容");
        return;
      }
      this.addLoading = true;
      this.form.forwardAttr = this.forwardDataList;
      axios.post("/freightCalculate/calculate", this.form).then(res => {
        this.addLoading = false;
        this.calculateVisible = true;
        if (res.data) {
          var data = {};
          if (typeof res.data === 'string') {
            data = JSON.parse(res.data);
          } else {
            data = res.data;
          }
          if (data.errCode === 10000) {
            this.calculateList = data.content;
          } else {
            this.$message.error(data.errMsg);
          }
        }
      })
    },
    calculateSizeChange() {
    },
    calculateCurrentChange() {
    },
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器占满整个视口高度 */
}

.form {
  width: 60%;
  margin: 0 auto;
  margin-top: 50px;
}

.crumbs {
  margin-bottom: 20px;
}

</style>
